<ion-header>
  <ion-navbar>
    <ion-title class="bp-title">{{'Transactions' | translate}}</ion-title>
    <ion-buttons left>
      <button class="close-container disable-hover" (click)="close()" ion-button>
        <ion-icon ios="md-close" md="md-close"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-item class="search-container" no-lines padding>
    <ion-input class="search-wrapper" placeholder="{{'Search Transactions' | translate}}" [(ngModel)]="search" (ngModelChange)="updateSearchInput(search)"></ion-input>
  </ion-item>

  <ion-list *ngIf="txHistorySearchResults && txHistorySearchResults[0]" class="bp-list tx-history">
    <div>
      <div *ngFor="let tx of txHistorySearchResults; trackBy: trackByFn; let i = index;">
        <button ion-item (click)="close(tx.txid)">
          <ion-icon item-start>
            <div *ngIf="tx.confirmations == 0">
              <img src="assets/img/tx-action/icon-confirming.svg" width="40">
            </div>
            <div *ngIf="tx.confirmations > 0">
              <span *ngIf="tx.customData && tx.customData.service">
                <img class="icon-services" style="padding: 5px;" src="assets/img/wallet-connect/wallet-connect-grey.svg" *ngIf="tx.customData.service == 'walletConnect'" width="40">
                <img class="icon-services" src="assets/img/shapeshift/icon-shapeshift.svg" *ngIf="tx.customData.service == 'shapeshift'" width="40">
                <img class="icon-services" src="assets/img/exchange-crypto/changelly-icon.svg" *ngIf="tx.customData.service == 'changelly'" width="40">
                <img class="icon-services" src="assets/img/exchange-crypto/1inch-icon.svg" *ngIf="tx.customData.service == 'oneInch'" width="40">
                <img-loader class="icon-services" *ngIf="tx.customData.service === 'amazon'" src="https://bitpay.com/gift-cards/assets/amazoncom/icon.svg" width="40" fallbackUrl="assets/img/gift-cards/gift-cards-icon.svg"></img-loader>
                <img-loader class="icon-services" *ngIf="tx.customData.service === 'mercadolibre'" src="https://bitpay.com/gift-cards/assets/mercadolivre/icon.svg" width="40" fallbackUrl="assets/img/gift-cards/gift-cards-icon.svg"></img-loader>
                <ng-container *ngIf="supportedCards | async as cardConfig">
                  <img-loader class="icon-services" *ngIf="tx.customData.service === 'giftcards'" [src]="cardConfig[tx.customData.giftCardName]?.icon" width="40" fallbackUrl="assets/img/gift-cards/gift-cards-icon.svg"></img-loader>
                </ng-container>
                <img class="icon-services" src="assets/img/bitpay-card/icon-bitpay.svg" *ngIf="tx.customData.service == 'debitcard'" width="40">
              </span>
              <span *ngIf="!tx.customData || !tx.customData.service">
                <img src="assets/img/tx-action/icon-received.svg" *ngIf="tx.action == 'received'" width="40">
                <img src="assets/img/tx-action/icon-sent.svg" *ngIf="tx.action == 'sent'" width="40">
                <img src="assets/img/tx-action/icon-moved.svg" *ngIf="tx.action == 'moved'" width="40">
              </span>
            </div>
          </ion-icon>

          <div class="action" *ngIf="tx.confirmations == 0">
            <span *ngIf="(tx.action == 'sent') && !(addressbook && addressbook[tx.outputs[0].address])">{{'Sending'
              | translate}}</span>
            <span *ngIf="(tx.action == 'moved') && !(addressbook && addressbook[tx.outputs[0].address])">{{'Moving'
              | translate}}</span>
            <span *ngIf="(tx.action == 'sent' || tx.action == 'moved') && (addressbook && addressbook[tx.outputs[0].address])">{{addressbook[tx.outputs[0].address].name
              || addressbook[tx.outputs[0].address]}}</span>
            <span *ngIf="tx.action == 'received'">{{'Receiving' | translate}}</span>
          </div>

          <div class="action" *ngIf="tx.confirmations > 0 && tx.action == 'received'">
            <span *ngIf="(!tx.note || (tx.note && tx.note.body == '')) && (!addressbook || !addressbook[tx.outputs[0].address])">{{'Received'
              | translate}}</span>
            <span *ngIf="tx.note && tx.note.body != ''">{{tx.note.body}}</span>
            <span *ngIf="addressbook && addressbook[tx.outputs[0].address]">
              {{addressbook[tx.outputs[0].address].name || addressbook[tx.outputs[0].address]}}
            </span>
          </div>

          <div class="action" *ngIf="tx.confirmations > 0 && tx.action == 'sent'">
            <span *ngIf="!tx.message && (!tx.note || (tx.note && tx.note.body == '')) && (!addressbook || !addressbook[tx.outputs[0].address])">{{'Sent'
              | translate}}</span>
            <span *ngIf="tx.message">{{tx.message}}</span>
            <span *ngIf="!tx.message && tx.note && tx.note.body != ''">{{tx.note.body}}</span>
            <span *ngIf="!tx.message && addressbook && addressbook[tx.outputs[0].address]">
              {{addressbook[tx.outputs[0].address].name || addressbook[tx.outputs[0].address]}}
            </span>
          </div>

          <div class="action" *ngIf="tx.confirmations > 0 && tx.action == 'moved'">
            <span *ngIf="(!tx.note || (tx.note && tx.note.body == ''))" translate>Sent to self</span>
            <span *ngIf="tx.note && tx.note.body != ''">{{tx.note.body}}</span>
          </div>

          <div class="action" *ngIf="tx.confirmations > 0 && tx.action == 'invalid'">
            <span class="assertive" *ngIf="!tx.message && !tx.note" translate>Invalid</span>
          </div>

          <ion-note item-end text-end>
            <div class="amount">
              <span [ngClass]="{'received': tx.action == 'received'}" *ngIf="tx.action != 'invalid'">{{tx.amount |
                satToUnit: wallet.coin}}</span>
              <span class="double-spend" *ngIf="tx.action == 'invalid'" translate>(possible double spend)</span>
            </div>
            <div class="date">
              <span *ngIf="tx.time && createdWithinPastDay(tx.time * 1000)">{{tx.time * 1000 | amTimeAgo}}</span>
              <span *ngIf="tx.time && !createdWithinPastDay(tx.time * 1000)">{{tx.time * 1000 | amDateFormat:'MMM D,
                YYYY'}}</span>
            </div>
          </ion-note>
        </button>
      </div>
    </div>
    <div class="txs-count" *ngIf="txHistoryShowMore">
      <span>{{filteredTxHistory.length - txHistorySearchResults.length}} more</span>
      &nbsp;
      <ion-icon name="arrow-down"></ion-icon>
    </div>
  </ion-list>

  <ion-infinite-scroll *ngIf="txHistoryShowMore" (ionInfinite)="moreSearchResults($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>